<template>
  <div class="p-15 p-t-0 box-shadow-1">
    <div class="table-search" style="width: 100%">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-input v-model="input" size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入单号"
                    class="w-100p"
                    :maxlength="20">
            <template slot="prepend">
              <el-button>单号</el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">状态</div>
            <el-select size="medium" v-model="supplier" filterable placeholder="请选择状态" style="width:100%;">
              <el-option
                v-for="item in suppliers"
                :key="item.id"
                :label="item.name"
                :disabled="item.state && item.state.key!='NORMAL'"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium">
            <div class="el-input-group__prepend">订单日期</div>
            <el-date-picker
              v-model="createAt"
              type="date"
              class="w-100p"
              @change="getEntryTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择调拨日期">
            </el-date-picker>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top:20px;">
        <el-col :span="8">
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">调出门店</div>
            <el-select size="medium" v-model="supplier" filterable placeholder="请选择调出门店" style="width:100%;">
              <el-option
                v-for="item in suppliers"
                :key="item.id"
                :label="item.name"
                :disabled="item.state && item.state.key!='NORMAL'"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">调入门店</div>
            <el-select size="medium" v-model="supplier" filterable placeholder="请选择调入门店" style="width:100%;">
              <el-option
                v-for="item in suppliers"
                :key="item.id"
                :label="item.name"
                :disabled="item.state && item.state.key!='NORMAL'"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>

        <el-col :span="8" class="text-left" style="padding-right: 0px;padding-left: 0px;">
          &nbsp;&nbsp;
          <el-button class="btn-info" icon="el-icon-search" size="medium" @click="search(1)">搜索</el-button>
          <el-button class="btn-warning" style="margin-left: 1px" size="medium" icon="el-icon-refresh"
                     @click="cleanSearch">重置
          </el-button>
        </el-col>

      </el-row>
    </div>
    <div class="table-padding">
      <div class="text-left"
           style="padding: 10px 10px; margin:20px 0px; color: #8a6d3b; background-color: #fcf8e3; border:1px solid  #faebcc;">
        <div  >
          <div>
            <div>1、要进行门店调拨功能，需要在权限模板中为门店配置权限。</div>
            <div>2、只有总部配置过协议价且调拨双方的原材料管理中均存在的原材料才能够调拨。</div>
            <div>3、在总部库存管理-工作流配置中设置调拨是否需要总部审核。</div>
          </div>
        </div>
      </div>
      <!--<div class="title-buttons">-->
      <!--<router-link to="/transferOrders/add">-->
      <!--<el-button  class="title-button btn-primary" size="medium" icon="el-icon-plus">新建&nbsp;</el-button>-->
      <!--</router-link>-->
      <!--</div>-->
      <el-table
        v-loading="loading"
        :data="tableData"
        :border="true"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>

        <el-table-column
          label="单号" width="145">
          <template slot-scope="scope">
            <span>{{scope.row.no}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="调出门店">
          <template slot-scope="scope">
            <span>{{scope.row.transferOutName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="调入门店">
          <template slot-scope="scope">
            <span>{{scope.row.transferInName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="调拨发起日期">
          <template slot-scope="scope">
            <span>{{scope.row.operateTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="调拨收货日期">
          <template slot-scope="scope">
            <span>{{scope.row.operateTime}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="调出金额">
          <template slot-scope="scope">
            <span>{{scope.row.amount | money}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="调入金额">
          <template slot-scope="scope">
            <span>{{scope.row.amount | money}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.amount | money}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column-->
        <!--label="备注">-->
        <!--<template  slot-scope="scope">-->
        <!--<span>{{scope.row.remark}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->

        <el-table-column label="操作" width="210">
          <template slot-scope="scope">
            <router-link :to="'/transferOrders/add?type=5&id='+scope.row.id" class="m-r-5">
              <el-button type="text" size="medium" style="margin: 0px;">查看</el-button>
            </router-link>
            <router-link :to="'/transferOrders/add?id='+scope.row.id" v-if="scope.row.state.key=='NOAUDIT'"
                         class="m-r-5">
              <el-button type="text" size="medium" style="margin: 0px;" @click="handleEdit(scope.$index, scope.row)">
                | 修改
              </el-button>
            </router-link>
            <el-button v-if="scope.row.state.key=='NOAUDIT'" class="m-r-5"
                       type="text"
                       size="medium"
                       style="margin: 0px;"
                       @click="handleDelete(scope.$index, scope.row)"> | 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <div class="block">
        <el-row>
          <el-col :span="24" class="text-right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="pageSizeSet"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>

    <PluginConfirm
      :show="dialogIsShow"
      @chooseSure="chooseSure()"
      @chooseCancel="chooseCancel()"
      @dialogResult="dialogResult">
    </PluginConfirm>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        tableData: [],
        loading: false,
        pageSizeSet: window.pageSizeSet,
        pageSize: window.pageSize,
        currentPage: 1,
        input: "",
        total: 0,
        tableIndex: 0,
        supplier: "",
        warehouse: "",
        suppliers: [],
        warehouses: [],
        createAt: "",
        createAt1: "",
        types: [],
        type: "",
        activeName2: 'first',

        dialogIsShow: false,
        curDataRow: null,
        curDataIndex: 0
      }
    },
    created() {
      window.this = this;
      this.initData();
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      initData() {
        this.loading = true;
        this.$axios.get("stores/transferOrders?page.pn=1&page.size=" + this.pageSize).then((data) => {
          if (data.status == 200) {
            var data = data.content;
            this.tableData = data.content;
            this.total = data.total;
            this.warehouses = data.warehouse;
            this.types = data.types;
            this.loading = false
          } else {
            this.loading = false
          }
        })
      },

      getEntryTime(val) {
        this.createAt = val;
      },
      getEntryTime1(val) {
        this.createAt1 = val;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.search();
      },
      keyDown(ev) {
        if (ev.keyCode == 13) {
          this.search(1);
        }
      },
      search(content) {
        var search = "";
        if (content == 1) {
          search = "search.no_like=" + this.input + "&" + search;
        }

        if (this.createAt != "") {
          console.log(this.createAt);
          search = "search.operateTime_gte=" + this.createAt + " 00:00:00&" + search;
        }
        if (this.createAt1 != "") {
          search = "search.operateTime_lte=" + this.createAt1 + " 23:59:59&" + search;
        }


        this.$axios.get("stores/transferOrders?" + search + "page.size=" + this.pageSize).then((data) => {
          if (data.status == 200) {
            var data = data.content;
            this.tableData = data.content;
            this.total = data.total;
            this.loading = false
          } else {
            this.loading = false
          }
        })
      },
      cleanSearch() {
        this.input = "";
        this.createAt = "";
        this.createAt1 = "";
        this.currentPage = 1;
        this.search("");
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        var search = "";
        this.$axios.get("stores/transferOrders?" + search + "page.pn=" + currentPage + "&page.size=" + this.pageSize).then((data) => {
          if (data.status == 200) {
            var data = data.content;
            this.tableData = data.content;
            this.total = data.total;
            this.loading = false
          } else {
            this.loading = false
          }
        })
      },
      goBack() {
        this.router.go(-1);
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      /*用户选择提示框后处理*/
      dialogResult(param) {
        this.dialogIsShow = param.close;
        if (param.choose === "ok") {
          //console.log("确定");
          this.$axios.delete("stores/transferOrders/" + this.curDataRow.id).then(data => {
            if (data.status == 200) {
              this.tableData.splice(this.curDataIndex, 1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initData();
            } else {
              this.$message({
                type: 'error',
                message: data.message
              });
            }
          })
        } else if (param.choose === "cancel") {
          //console.log("取消");
        } else {
          //console.log("不做处理");
        }
      },
      handleDelete(index, row) {
        this.curDataIndex = index;
        this.curDataRow = row;
        this.dialogIsShow = true;
        return false;
      },
    }
  }
</script>
<style scoped>
  .divList {
    width: 120px;
    height: 39px;
    float: left;
    line-height: 39px;
    text-align: center;
    color: #7f7f7f;
  }

  .divList:hover {
    color: #000000;
  }

  .jiaodian {
    border-top: 1px solid #cccccc;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #FFFFFF;
    color: #20a0ff;
  }

</style>
